<script lang="ts" setup>
import useRecordRTC, { useRecordRTCRefs } from "../../hooks/useRecordRTC";
import { getSvg } from "@/utils";
import recordConfig from "../../config/recordConfig";
import { useLongPress } from "./useLongPress";
import { useRecordRefs } from "../../hooks/useFetchRecord";
defineOptions({
  name: "RecordRTC"
});
useLongPress(() => {
  startRecording();
}, "recordRef");
const { startRecording, toggleRecord } = useRecordRTC();
const { isRecording, showRecord, style } = useRecordRTCRefs();
const { resData } = useRecordRefs();
</script>
<template>
  <Teleport to="body">
    <van-overlay
      :lock-scroll="true"
      z-index="1002"
      :show="showRecord"
      @click.stop="toggleRecord"
      :style="style"
    >
      <div
        @click.stop
        class="absolute left-0 bottom-0 w-390 h-220 bg-[#FFFFFF] shadow-[3px_0px_13px_0px_rgba(111,119,125,0.31)] rounded-[20px_20px_0px_0px]"
      >
        <div class="h-35 lh-35 flex justify-end items-center px-13">
          <img
            @click.stop="toggleRecord"
            class="w-30 h-30"
            :src="getSvg('Close(2)')"
            alt=""
          />
        </div>
        <div class="w-230 h-41 mx-auto mb-12">
          <van-password-input
            :value="resData.data.number"
            :mask="false"
            :style="recordConfig[resData.msg].style"
          />
        </div>
        <div class="flex justify-start items-center flex-col gap-y-10">
          <div
            class="center w-92 h-92"
            :class="{
              'record-animate': isRecording
            }"
            ref="recordRef"
            @contextmenu.prevent
          >
            <img class="w-full h-full" :src="getSvg('Group_192')" alt="" />
          </div>
          <p
            class="font-400 text-14 color-[#004894] lh-16 text-center not-italic"
            :class="{
              'color-[#F06868_!important]': resData.msg === 'fail'
            }"
          >
            {{ recordConfig[resData.msg].tips }}
          </p>
        </div>
      </div>
    </van-overlay>
  </Teleport>
</template>
<style lang="scss" scoped>
@keyframes pulse {
  0% {
    transform: scale(1);
    border-width: 12px;
  }
  50% {
    transform: scale(1.2);
    border-width: calc(12px * 1.2);
  }
  100% {
    transform: scale(1);
    border-width: 12px;
  }
}

.record-animate {
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  // pointer-events: none;
  background: radial-gradient(circle, #d8f0ff, #d8f0ff);
  padding: 12px;
}

:deep(.van-password-input) {
  .van-password-input__security {
    li {
      margin-right: 6px;
      border-radius: 4px;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
